<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.juser-banner{
	height: auto;
	position: relative;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#5097FF), to(#68D5FE));
}
.juser-inner{
	padding: 1.5rem 0 2rem 0;
}
.juser-icon{
	width:5rem;
	height: 5rem;
	border-radius: 7rem;
	margin: auto;
	margin-top: 1.5rem;
	overflow: hidden;
}
.juser-txt{
	text-align:center;
	color: #fff;
	padding-top:1rem;
}
.gerenbg{
	position:fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 0;
}
.juser-zhucetime{
	text-align: center;
	font-size:12px;
	color: #eee;
	padding-top: 10px;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div class="juser-banner" style="">
		<div id="userinfos" class="juser-inner">
			<div class="juser-icon">
				<img id="headImg" src="img/zw.png" class="img"/>
			</div>
			<div id="userName" class="juser-txt">未登陆</div>
			<div id="regDate" class="juser-zhucetime"></div>
		</div>
	</div>
	
	
	<div class="jlist">
		<ul class="jlist-ul">
			<li data-title="保养预约记录" data-url="/tpl/baoyangjilu.html" class="jlist-li vcenter line-b">
				<div class="jlist-li-icon"><i class="iconfont icon-i3"></i></div>
				<div class="jlist-li-label">保养预约记录</div>
				<div class="jlist-li-ricon"><i class="iconfont icon-i6"></i></div>
			</li>
			<li data-ricon="添加" data-title="车辆信息" data-url="/tpl/cheliang.html" class="jlist-li vcenter line-b">
				<div class="jlist-li-icon jlicolor1"><i class="iconfont icon-cl2"></i></div>
				<div class="jlist-li-label">车辆信息</div>
				<div class="jlist-li-ricon"><i class="iconfont icon-i6"></i></div>
			</li>
			<li class="jlist-li vcenter line-b" data-title="个人资料" data-url="/tpl/userinfo.html">
				<div class="jlist-li-icon jlicolor3"><i class="iconfont icon-i1"></i></div>
				<div class="jlist-li-label">个人资料</div>
				<div class="jlist-li-ricon"><i class="iconfont icon-i6"></i></div>
			</li>
			<li data-title="个人设置" data-url="/tpl/setting.html" class="jlist-li vcenter">
				<div class="jlist-li-icon jlicolor2"><i class="iconfont icon-sz"></i></div>
				<div class="jlist-li-label">个人设置</div>
				<div class="jlist-li-ricon"><i class="iconfont icon-i6"></i></div>
			</li>
		</ul>
	</div>
</div>

<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/**
	 * 加载数据的监听
	 */
	window.addEventListener("loadList", function(e) {
		userInfoInit();
	});
	
	/**
	 * 加载数据的监听
	 */
	window.addEventListener("updateHeadImg", function(e) {
		document.getElementById("headImg").setAttribute("src",webapp.config.restUrl+e.detail.path);
		plus.webview.getTopWebview().hide("auto");
	});
	/**
	 * 
	 * 绑定点击事件
	 * 
	 */
	mui('#jcontent').on('tap','.jlist-li', function() {
		webapp.openByTpl({
			title:this.getAttribute("data-title"),
			hrefs:this.getAttribute("data-url"),
			ricon:this.getAttribute("data-ricon")
		});
	});

	/**
	 * 顶部头像的点击事件，如果界面已经显示登陆状态了，不处理
	 * 
	 * 如果用户用户未登陆，跳出登陆界面
	 */
	mui('#jcontent').on('tap','#userinfos', function() {
		userInfoInit();
	});
	
	/**
	 * 初始化用户登陆信息
	 */
	function userInfoInit(){
		var _token=webapp.getToken();
		var _regDate=document.getElementById("regDate").innerHTML;
		if(webapp.util.isNull(_token)){
			//跳出登陆界面
			webapp.showLogin();
			return false;
		}
		//获取缓存中的用户对象
		setUserInfo();
	}

	mui.plusReady(function(){
		var user=webapp.getUser();
		if(user){
			setUserInfo();
		}
	});
	/**
	 * 设置界面上的显示用户信息
	 */
	function setUserInfo(){
		var user=webapp.getUser();
		if(user==null){
		}
		webapp.debug(user);
		var _nikName=user.nickName;
		var _mobile=user.mobile;
		var _headImg=user.headPortrait;
		//昵称为空显示手机号码
		if(webapp.util.isNull(_nikName)){
			document.getElementById("userName").innerHTML=_mobile;
		}else{
			document.getElementById("userName").innerHTML=_nikName;
		}
		//显示注册时间
		document.getElementById("regDate").innerHTML=user.regTime+"注册";
		//显示头像
		if(webapp.util.isNotNull(_headImg)){
			var _img=document.getElementById("headImg");
			_img.src=webapp.config.restUrl+_headImg;//.setAttribute("src",);
		}
	}
	
	function changePhoto(){
		var btnArray = [{title:"拍照"},{title:"从相册选择"}];
		plus.nativeUI.actionSheet( {
			title:"选择",
			cancel:"取消",
			buttons:btnArray
		},function(e){
			if(e.index==1){
				//拍照
				camara();
			}else{
				//从相册选择
				galleryImgs();
			}
		});
	}
	
	window.addEventListener("userInfoInit", function(e) {
		setUserInfo();
		webapp.closeWaiting();
		plus.webview.getTopWebview().hide("auto");
	});
	
//拍照
function camara() {
	//调用图片裁剪页面
    webapp.openByTpl({
		title:"头像设置",
		hrefs:"/tpl/changephoto.html",
		ricon:"保存"
	});
   
}
//相册选取
function galleryImgs(){
    plus.gallery.pick( function(e){
        var img=e.files[0];
        
    }, function ( e ) {
        //outSet( "取消选择图片" );
    },{
    	filter:"image",
    	multiple:true
    });
}
</script>
</body>
</html>